<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <link href="/layui/css/layui.css" media="all" rel="stylesheet">
        </link>
        <style>
            input {padding-left: 0px !important;}
        </style>
    </head>
    <body>
        <script src="/layui/layui.js">
        </script>
        <form class="layui-form">
            <table class="layui-table" id="demo" lay-filter="demo">
                <thead>
                    <tr>
                      <th colspan="1" rowspan="2">科        目</th>
                      <th colspan="1" rowspan="2">明细项目</th>
                      <th colspan="1" rowspan="2">发生时间、金额及分摊办法</th>
                      <th colspan="1" rowspan="2">年初余额</th>
                      <th colspan="4" style="width: 200px">增加数</th>
                      <th colspan="4" style="width: 200px">减少数</th>
                      <th colspan="1" rowspan="2">期末余额</th>
                      <th colspan="1" rowspan="2">备  注</th>
                    </tr>
                    <tr>
                      <th><input autocomplete="off" style="width: 20px;display: inline-block;" class="layui-input th_input "  lay-verify="required" placeholder=""  type="text" value=""/>月</th>
                      <th><input autocomplete="off" style="width: 20px;display: inline-block;" class="layui-input th_input"  lay-verify="required" placeholder=""  type="text" value=""/>月</th>
                      <th><input autocomplete="off" style="width: 20px;display: inline-block;" class="layui-input th_input"  lay-verify="required" placeholder=""  type="text" value=""/>月</th>
                      <th>累计</th>
                      <th><input autocomplete="off" style="width: 20px;display: inline-block;" class="layui-input th_input_with "  lay-verify="required" placeholder=""  type="text" value=""/>月</th>
                      <th><input autocomplete="off" style="width: 20px;display: inline-block;" class="layui-input th_input_with"  lay-verify="required" placeholder=""  type="text" value=""/>月</th>
                      <th><input autocomplete="off" style="width: 20px;display: inline-block;" class="layui-input th_input_with"  lay-verify="required" placeholder=""  type="text" value=""/>月</th>
                      <th>累计</th>
                    </tr>
             <!--    <tr>
                  <th lay-data="{field:'username', width:100}">昵称</th>
                  <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
                  <th lay-data="{field:'sign'}">签名</th>
                </tr> -->
                </thead>
                <tbody class="data-tbody">
                    <tr class="td-0">
                      <td>
                        <input type="checkbox" lay-filter='filter' lay-skin="primary">
                        <input width="" autocomplete="off" lay-data="" class="layui-input classfiy"  lay-verify="required" placeholder="请输入科目"  type="text" value=""/>
                      </td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入明细项目"  type="text" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="发生时间、金额及分摊办法"  type="text" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="年初余额"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入累计"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入累计"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="期末余额"  type="number" value=""/></td>
                      <td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="备 注"  type="text" value=""/></td>
                    </tr>
                </tbody>
            </table>
            {{csrf_field()}}
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn submit" lay-filter="formDemo" lay-submit="">
                        立即提交
                    </button>
                    <button class="layui-btn add" >添加科目</button>
                    <button class="layui-btn reduce" >减少科目</button>
                    <button class="layui-btn add_detail" >添加一个科目明细</button>
                    <button class="layui-btn reduce_detail" >减少一个科目明细</button>
                </div>
            </div>
        </form>
    </body>
</html>
<script>
    //Demo
    layui.use(['form','table'], function () {
        var table = layui.table;
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log($(this).attr('class'));
            if ($(this).attr('class') == 'layui-btn submit demo2') {
                demo2();
                return false;
            }
            
            layer.msg('已提交');
            //layer.msg(JSON.stringify(data.field));
            var sum_data = [];
            $('.straight_alcohol').each(function () {
                var values = $(this).val();
                //straight_alcohol.push(values);
            });
            $('.data-tbody').children('tr').each(function () {
                var data = [];
                $(this).children('td:eq(0)').each(function () {
                    var val = $(this).children('input:eq(1)').val();
                    //console.log(val);
                    data.push(val);
                });
                $(this).children('td:gt(0)').each(function () {
                    var val = $(this).children('input').val();
                    //console.log(val);
                    data.push(val);
                });
                sum_data.push(data);
            });
            
            var add_mouth = [];
            var reduce_mouth = [];
            $('.th_input').each(function () {
              value = $(this).val();
              add_mouth.push(value+'月增加数');
              reduce_mouth.push(value+ '月减少数');
            });
             
            var head = ['科 目', '明细项目', '发生时间、金额及分摊办法', '年初余额', add_mouth, '累计',reduce_mouth, '累计', '期末余额', '备注'];
            //console.log(head, sum_data);
            table.exportFile(head, sum_data, '{{$title}}.csv'); //默认导出 csv，也可以为：xls
            return false;
        });

        // 增加
        $('.add').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            var html = '';
                    html += '<tr class='+'td-'+index+'>';
                      html += '<td >';
                      html += '<input  type="checkbox" lay-filter="filter" name="" title="" lay-skin="primary">';
                      html += '<input width="" autocomplete="off" lay-data="" class="layui-input classfiy"  lay-verify="required" placeholder="请输入科 目"  type="text" value=""/>';
                      html += '</td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入明细项目"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="发生时间、金额及分摊办法"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="年初余额"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入累计"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入累计"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="期末余额"  type="text" value=""/></td>';
                      html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="备 注"  type="text" value=""/></td>';
                    html += '</tr>';

            $('.data-tbody').append(html);
            layer.msg('增加了新科目');
            $('.td-row').attr('rowspan', index + 1);
            form.render('checkbox');

            // 刷新onchange
            addOnchang();
            return false;
        });
        // 减少
        $('.reduce').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            if (index <= 1) {
                layer.msg('保留'+index+'行');
                return false;
            }
            $('.data-tbody').children('tr')[index - 1].remove();
            return false;
        });
        // 添加科目明细
        $('.add_detail').on('click', function () {
          var td = $('.layui-form-checked').parent('td');
          if (td.length <= 0) {layer.msg('没有选中已有的科目'); return false;}
          tr = $(td).parent('tr');
          tr_class = $(tr[0]).attr('class');
          count = $('.'+tr_class).length;
          res = $('.' + tr_class).find('td:eq(0)').attr('rowspan', count + 1);
          input_value = $('.' + tr_class).find('td:eq(0)').find('input.layui-input').val();
          // 添加到最后一个元素上去
          html = newRowSpan(tr_class, input_value);
          $('.' + tr_class).last().after(html);
          //console.log(tr_class, );
          return false;
        });
        // 减少科目明细
        $('.reduce_detail').on('click', function () {
          var td = $('.layui-form-checked').parent('td');
          if (td.length <= 0) {layer.msg('没有选中已有的科目'); return false;}

          count = $('.' + tr_class).length;
          if (count <= 1) {
            layer.open({
              content:'继续删除会删除整个科目',
              yes:function (layers) {
                 // 从最后一个开始减少
                $('.' + tr_class).last().remove();
                          count = $('.'+tr_class).length;
          res = $('.' + tr_class).find('td:eq(0)').attr('rowspan', count);
                layer.close(layers);
              }
            });
            return false;
          }
          // 从最后一个开始减少
          $('.' + tr_class).last().remove();
          count = $('.'+tr_class).length;
          res = $('.' + tr_class).find('td:eq(0)').attr('rowspan', count);
          return false;
        });

        function newRowSpan(td_class, input_value){
              var html = '';
            html += '<tr class='+td_class+'>';
              html += '<td class="layui-hide">';
              html += '<input  type="checkbox" name="" lay-filter="filter" title="" lay-skin="primary">';
              html += '<input width="" autocomplete="off" lay-data="" class="layui-input"  lay-verify="required" placeholder="请输入科 目"  type="text" value="'+input_value+'"/>';
              html += '</td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入明细项目"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="发生时间、金额及分摊办法"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="年初余额"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入累计"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="请输入累计"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="期末余额"  type="text" value=""/></td>';
              html += '<td><input autocomplete="off" lay-data="" class="layui-input "  lay-verify="required" placeholder="备 注"  type="text" value=""/></td>';
            html += '</tr>';

            return html;
        }

        form.on('checkbox(filter)', function(data){
          // console.log(data.elem); //得到checkbox原始DOM对象
          // console.log(data.elem.checked); //是否被选中，true或者false
          // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
          // console.log(data.othis); //得到美化后的DOM对象
            data.othis.addClass('layui-form-checked');

            count = $('.layui-form-checked').length;
            console.log(count);
            if (count > 1) {
              $('.layui-form-checked').removeClass('layui-form-checked');
              data.othis.addClass('layui-form-checked');
            }

            if (count == 1 && !data.elem.checked) {
              $('.layui-form-checked').removeClass('layui-form-checked');
            }
        });

        function addOnchang() {
          // 科目输入事件
          $('.classfiy').on('change', function() {
            tr_class = $(this).parent().parent().attr('class');
            console.log(tr_class);
            value = $(this).val();
            $('.'+tr_class).find('td:eq(0)').find('input.layui-input').attr('value', value);
          });
        }

        // 科目输入事件
        $('.classfiy').on('change', function() {
          tr_class = $(this).parent().parent().attr('class');
          console.log(tr_class);
          value = $(this).val();
          $('.'+tr_class).find('td:eq(0)').find('input.layui-input').attr('value', value);
        });

        // 月份输入
        // 月份输入框离开聚焦事件
        $('.th_input').on('change', function () {
            var th_input = [];
            $('.th_input').each(function () {
                th_input.push($(this).val());
            });

            var inpu_with = $('.th_input_with');

            for (var i in th_input) {
                $(inpu_with[i]).val(th_input[i]);
            }
        });
    });
</script>